<template>
    <div class="header">
        <div class="logo">
            <div class="pic">
                <img src="../../assets/测盟汇图标.png" alt="">
            </div>
            <div class="chinese_name">
                <el-text class="mx-1" style="font-weight: 700;font-size: 20px;color: white;">测盟汇</el-text>

            </div>
            <div class="eng_name">
                <el-text class="mx-1" style="font-weight: 700;font-size: 20px;color: white;">Measurement Alliance Collection</el-text>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

    
</script>

<style> 
    .logo {
        display: flex;
        height: 70px;
        align-items: center;
        background-color: rgb(72, 184, 199);
        border-radius: 10px
    }

    .logo .pic {
        padding-left: 20px;
        height: 60px;
        width: 60px;
        margin-right: 20px;
    }

    .logo img {
        height: 100%;
        width: 100%;
    }

    .chinese_name, .eng_name {
        font-weight: 700;
        font-size: 20px;
        display: inline-block;
        margin-right: 20px;
    }

    .chinese_name {
        margin-left: 0; /* remove margin-left */
    }

</style>